<script setup lang="ts">
import {api as viewerApi} from "v-viewer";
import 'viewerjs/dist/viewer.css';
import {ref} from "vue";


defineOptions({
  name: "ImgViewer",
});
const props = defineProps<{
  imageUrlKey: string | 'src'
}>()

const $viewer = ref({});
// 预览图片，默认从第一个开始预览，调方法的时候，可以修改
const previewImage = (initialIndex = 0,imageList:any,config = {}) => {

  if (!imageList || imageList.length === 0) {
    console.error("请传入正确的图片数组");
    return;
  }
  const previewConfig = {
    options: {
      toolbar: true,
      initialViewIndex: initialIndex,
      url: '',
      className: 'whitebg',
    },
    images: imageList
  };
  Object.assign(previewConfig, config);
  console.log("previewImage:",previewConfig)
  if (imageList[0][props.imageUrlKey]) {
    previewConfig.options.url = props.imageUrlKey;
  }
  if ($viewer.value) {
    $viewer.value = viewerApi(previewConfig);
  }
};

defineExpose({
  previewImage
});
</script>

<template>
  <div/>
</template>

<style scoped>

</style>
